import React from 'react';
import {
  Input,
  Divider,
  message,
  Form
} from 'antd';

class NormalForm extends React.Component {
  constructor(props) {
    super(props);
    props.saveInstance && props.saveInstance(this)
  }

  handleSubmit = (event) => {
    event && event.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (err) {
        return false;
      }
      this.props.onSaveForm({
        name: values.name, 
        id: this.props.data._id
      });
    });
  }

  componentDidMount(){
    if (this.props.data._id) {
      this.setFieldsValue();
    }
  }

  componentDidUpdate(prevProps){
    if ( prevProps.data._id != this.props.data._id ) {
      this.setFieldsValue();
    }
  }

  setFieldsValue = () => {
    const { data, toptypeid } = this.props;
    this.props.form.setFieldsValue({
      name: data.name,
    });
  }

  resetFieldsValue = () => {
    this.props.form.setFieldsValue({
      name: '',
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { toptypeid } = this.props;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const buttonItemLayout = {
      wrapperCol: { span: 14, offset: 6 },
    };
    return (
      <div>
        <Form layout="horizontal">
          <Form.Item label={toptypeid ? '细类' : '大类'} {...formItemLayout}>
            {
              getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入类名' }],
              })(
                <Input placeholder="请输入类名" />
              )
            }            
          </Form.Item>
        </Form>
      </div>
    );
  }
}


export default Form.create()(NormalForm)